<template>
  <div class="implementation">
    <div class="implementation-table" ref="implementationTable">
      <table>
        <tr>
          <td class="iCanvasBox">
            <div class="iCanvasBox-item1"></div>
            <div class="iCanvasBox-item2" style="line-height: 1.5">预计/实际</div>
            <div class="iCanvasBox-item3" style="line-height: 1.5">类型</div>
          </td>
          <td>预计</td>
          <td>实际</td>
        </tr>
        <tr v-for="(item,index) in implementationType" :key="index">
          <td v-for="(child,idx) in item" :key="index + idx + 'td'">
             <span  v-if='idx === 2'>
              <a v-if='index!==6' @click=handleClick(index)>{{ child }}</a>
              <span v-else>{{ child }}</span>
            </span>
            <span v-else>{{ child }}</span>
          </td>
        </tr>
      </table>
    </div>
    <div id="Implementation-chart"></div>
  </div>
</template>

<script>
import {getAction} from '@api/manage'
import { splitByNum } from '@/utils/util'

export default {
  name: "ImplementationDetails",
  description: "实施明细页面",
  data() {
    return {
      url: {
        implement: "/pm/hfPmProjectCheck/implement"
      },
      implementationType: [],
      field:['exploitWorkday','implementWorkday','humanCost','reimbursementMoney','judge','travel']
    }
  },
  methods: {
    handleClick(index){
      let change = this.field[index]
      this.$emit('change',change)
    },
    loadData(id) {
      getAction(this.url.implement, {id}).then(res => {
        if (res.success) {
          this.renderChart(res.result)
          this.renderLine()
          let implementationType = []
          res.result.xAxisData.forEach((item, index) => {
            if (index<2){
              implementationType.push([item, res.result.yAxisDataPlan[index] || res.result.yAxisDataPlan[index] == 0 ? res.result.yAxisDataPlan[index] : '', res.result.yAxisDataActual[index] || res.result.yAxisDataActual[index] == 0 ? res.result.yAxisDataActual[index] : ''])
            }else {
            implementationType.push([item, res.result.yAxisDataPlan[index] || res.result.yAxisDataPlan[index] == 0 ? splitByNum(res.result.yAxisDataPlan[index]) : '', res.result.yAxisDataActual[index] || res.result.yAxisDataActual[index] == 0 ? splitByNum(res.result.yAxisDataActual[index]) : ''])
            }
          })
          this.implementationType = implementationType
        }
      })
    },
    renderLine() {
      let oLine = document.getElementsByClassName('iCanvasBox-item1')[0]
      let oTd = document.getElementsByClassName('iCanvasBox')[0]
      let oWidth = Math.sqrt(oTd.offsetWidth * oTd.offsetWidth + oTd.offsetHeight * oTd.offsetHeight)
      oLine.style.width = oWidth + 'px'
      oLine.style.height = '1px'
      oLine.style.backgroundColor = '#e8e8e8'
      oLine.style.transform = `rotate(${(Math.atan(oTd.offsetHeight / oWidth)) * 180 / Math.PI}deg)`
      oLine.style.transformOrigin = '0 0'
    },
    renderChart(obj) {
      let myCharts = this.$echarts.init(document.getElementById('Implementation-chart'))
      let option = {
        title: {
          text: '',
          show: false,
          textAlign: "center",
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['预计', '实际']
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            fontSize: 14,
            color: '#000'
          },
          data: obj.xAxisData.slice(2,obj.xAxisData.length-1),
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
          },
          axisPointer: {type: 'shadow'}
        },
        grid: {
          top: 40,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '预计',
            type: 'bar',
            data: obj.yAxisDataPlan.slice(2,obj.xAxisData.length)
          },
          {
            name: '实际',
            type: 'bar',
            data: obj.yAxisDataActual.slice(2,obj.xAxisData.length)
          },
        ]
      };
      myCharts.setOption(option)
      window.onresize = () => {
        myCharts.resize()
      }
    },
  }
}
</script>

<style scoped lang="less">
.implementation {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  &-table {
    width: 30%;
    height: 100%;

    table {
      width: 100%;
      border: 1px solid #e8e8e8;

      tr {
        width: 100%;
        border-bottom: 1px solid #e8e8e8;

        &:last-child {
          border-bottom: none;
        }

        &:first-child {
          background-color: #fafafa;
          color: rgba(0, 0, 0, 0.85);
        }

        td {
          width: 33.33%;
          height: 38px;
          line-height: 38px;
          text-align: center;
          font-size: 14px;
          border-right: 1px solid #e8e8e8;

          &:last-child {
            border-right: none;
          }

          &:first-child {
            background-color: #fafafa;
            color: rgba(0, 0, 0, 0.85);
          }
        }

        .iCanvasBox {
          position: relative;
          overflow: hidden;

          &-item1 {
            position: absolute;
            left: 0px;
            top: 0;
            height: 1px;
          }

          &-item2 {
            position: absolute;
            right: 3px;
            top: 0;
            z-index: 10;
          }

          &-item3 {
            position: absolute;
            left: 3px;
            bottom: 0;
            z-index: 10;
          }
        }
      }
    }
  }

  #Implementation-chart {
    width: 70%;
    height: 400px;
  }
}
</style>